* {
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  background: #EEEEEE;
}

body {
  display: flex;
  overflow-x: hidden;
}

#app {
  font-family: Arial, 微软雅黑, "Microsoft yahei", "Hiragino Sans GB", "冬青黑体简体中文 w3", STXihei, 华文细黑, SimSun, 宋体, Heiti, 黑体, sans-serif;
  width: 100%;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

#play-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: -webkit-linear-gradient(top, #f9f9f9, #f3f3f3);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.play-bar-image-container {
  width: 37.5px;
  height: 37.5px;
  padding-left: 15px;
  cursor: pointer;
}

.play-bar-image {
  width: 37.5px;
  height: 37.5px;
  border-radius: 5px;
  display: inline-block;
}

.play-bar-text {
  flex-grow: 1;
  padding-left: 10px;
  cursor: pointer;
}

.play-bar-button {
  width: 20px;
  height: 20px;
  padding-right: 15px;
  cursor: pointer;
}

.fade-enter-active {
  transition: all .3s ease;
}

.fade-leave-active {
  transition: all .3s ease-out;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

.play-enter.play-enter-active {
  /*opacity: 1;*/
  transform: translate3d(0,0,0);
  transition: all .3s ease;
}

.play-leave.play-leave-active {
  /*opacity: 0;*/
  transform: translate3d(0,100%,0);
  transition: all .3s ease;
}

.play-enter {
  /*opacity: 0;*/
  transform: translate3d(0,100%,0);
}
.play-leave{
  /*opacity: 1;*/
  transform: translate3d(0,0,0);
}

.bar-slide-enter-active {
  transition: all .3s ease;
}

.bar-slide-leave-active {
  transition: all .3s ease-out;
}

.bar-slide-enter, .bar-slide-leave-active {
  margin-bottom: -50px;
}

@media screen and (min-width: 68vh) {
  body {
    width: 68vh;
    margin: 0 auto;
  }

  #play-bar {
    width: 68vh;
  }
}

/*border-1px 部分*/
.border-1px {
  position: relative;
}

.border-1px-after:after {
  border-top: 1px solid #d0d0d0;
  content: ' ';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
}

.border-1px-before:before {
  border-top: 1px solid #d0d0d0;
  content: ' ';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
}

.border-1px:before {
  top: 0;
}

.border-1px:after {
  bottom: 0;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .border-1px:after, .border-1px:before {
    -webkit-transform: scaleY(.7);
    -webkit-transform-origin: 0 0;
    transform: scaleY(.7);
  }

  .border-1px:after {
    -webkit-transform-origin: left bottom;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .border-1px:after, .border-1px:before {
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
}